@import './animation.scss';
@import './variable.scss';

/* 预设常用样式 */
@for $i from 1 through 100 {
  /* font-size */
  .pi-fz-#{$i} {
    font-size: 1rpx * $i;
  }
  /* padding */
  .pi-pd-#{$i} {
    padding: 1rpx * $i;
  }
  .pi-pd-top-#{$i} {
    padding-top: 1rpx * $i;
  }
  .pi-pd-right-#{$i} {
    padding-right: 1rpx * $i;
  }
  .pi-pd-bottom-#{$i} {
    padding-bottom: 1rpx * $i;
  }
  .pi-pd-left-#{$i} {
    padding-left: 1rpx * $i;
  }
  .pi-pd-tb-#{$i} {
    padding-top: 1rpx * $i;
    padding-bottom: 1rpx * $i;
  }
  .pi-pd-lr-#{$i} {
    padding-left: 1rpx * $i;
    padding-right: 1rpx * $i;
  }
  /* margin */
  .pi-mg-#{$i} {
    margin: 1rpx * $i;
  }
  .pi-mg-top-#{$i} {
    margin-top: 1rpx * $i;
  }
  .pi-mg-right-#{$i} {
    margin-right: 1rpx * $i;
  }
  .pi-mg-bottom-#{$i} {
    margin-bottom: 1rpx * $i;
  }
  .pi-mg-left-#{$i} {
    margin-left: 1rpx * $i;
  }
  .pi-mg-tb-#{$i} {
    margin-top: 1rpx * $i;
    margin-bottom: 1rpx * $i;
  }
  .pi-mg-lr-#{$i} {
    margin-left: 1rpx * $i;
    margin-right: 1rpx * $i;
  }
  // width & height
  .pi-width-#{$i} {
    width: 1rpx * $i;
  }
  .pi-height-#{$i} {
    height: 1rpx * $i;
  }

  // radius
  .pi-radius-#{$i} {
    border-radius: 1rpx * $i;
  }

  // line-height
  .pi-lh-#{$i} {
    line-height: 1rpx * $i;
  }
}

/* 字体 font
---------------------- */

// line-height
.pi-lh-base {
  line-height: 1;
}

.pi-bold {
  font-weight: bold;
}

@for $i from 1 through 9 {
  .pi-fw-#{$i * 100} {
    font-weight: $i * 100;
  }
}

.pi-line-through {
  text-decoration: line-through;
}
.pi-italic {
  font-style: italic;
}
.pi-indent {
  text-indent: 2em;
}

.pi-text-Abc {
  text-transform: Capitalize;
}

.pi-text-ABC {
  text-transform: Uppercase;
}

.pi-text-abc {
  text-transform: Lowercase;
}

.pi-text-price::before {
  content: '¥';
  font-size: 80%;
  margin-right: 4rpx;
}

.pi-text-price.en::before {
  content: '$';
}

.pi-text-cut,
.pi-ellipsis {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.pi-text-bold {
  font-weight: bold;
}

.pi-text-center {
  text-align: center;
}

.pi-text-content {
  line-height: 1.6;
}

.pi-text-left {
  text-align: left;
}

.pi-text-right {
  text-align: right;
}

/* 文字颜色 */
.pi-black {
  color: #0e151d;
}
.pi-white {
  color: #ffffff;
}
.pi-blue {
  color: #3688ff;
}
.pi-light-blue {
  color: #afcfff;
}
.pi-blue-sky {
  color: #61cbef;
}
.pi-gray {
  color: #666666;
}
.pi-light-gray {
  color: #999999;
}
.pi-gray-disable {
  color: #cccccc;
}

.pi-red {
  color: #e76b61;
}
.pi-yellow {
  color: #ffcc00;
}
.pi-light-yellow {
  color: #ecd1a8;
}
.pi-green {
  color: #9dd26d;
}

.pi-default {
  color: $pi-font-color;
}

.pi-primary {
  color: $pi-primary-color;
}

.pi-secondary {
  color: $pi-secondary-color;
}

.pi-tertiary {
  color: $pi-tertiary-color;
}

.pi-fourth {
  color: $pi-fourth-color;
}

.pi-fifth {
  color: $pi-fifth-color;
}

/* 背景 background
---------------------- */
/* 背景颜色 */
.pi-bg-black {
  background: #0e151d;
  color: #ffffff;
}
.pi-bg-white {
  background: #ffffff;
  color: #0e151d;
}
.pi-bg-blue {
  background: #3688ff;
  color: #ffffff;
}
.pi-bg-blue-sky {
  background: #61cbef;
  color: #ffffff;
}
.pi-bg-light-gray {
  background: #f2f2f2;
  color: #ffffff;
}
.pi-bg-gray {
  background: #a5a7b2;
  color: #ffffff;
}
.pi-bg-red {
  background: #e76b61;
  color: #ffffff;
}
.pi-bg-green {
  background: #9dd26d;
  color: #ffffff;
}
.pi-bg-yellow {
  background: #ffcc00;
  color: #ffffff;
}
.pi-bg-light-blue {
  background: #afcfff;
  color: #ffffff;
}
.pi-bg-light-yellow {
  background: #ecd1a8;
  color: #ffffff;
}

.pi-bg-primary {
  background: $pi-primary-color;
  color: #ffffff;
}

.pi-bg-secondary {
  background: $pi-secondary-color;
  color: #ffffff;
}

.pi-bg-tertiary {
  background: $pi-tertiary-color;
  color: #ffffff;
}

.pi-bg-fourth {
  background: $pi-fourth-color;
  color: #ffffff;
}

.pi-bg-fifth {
  background: $pi-fifth-color;
  color: #ffffff;
}

.pi-bg-opacity {
  background: transparent;
}

/*************************
image 
**************************/

.pi-image {
  max-width: 100%;
  display: inline-block;
  position: relative;
  z-index: 0;
}

.pi-imgbg {
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.pi-imgbg-center {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.pi-imgbg-bc {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}

/*************************
定位 
**************************/
.pi-absolute {
  position: absolute;
}
.pi-relative {
  position: relative;
}
.pi-fixed {
  position: fixed;
}

// absolute
.pi-absolute-top {
  @extend .pi-absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
.pi-absolute-center {
  @extend .pi-absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pi-absolute-lt {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
}
.pi-absolute-rt {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
}
.pi-absolute-lb {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
}
.pi-absolute-rb {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
}

// fixed
.pi-fixed-full {
  @extend .pi-fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.pi-fixed-top {
  @extend .pi-fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

.pi-fixed-bottom {
  @extend .pi-fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
}

.pi-fixed-center {
  @extend .pi-fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==================
         导航栏
 ==================== */
.pi-navi {
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
  .pi-navi-item {
    display: inline-block;
    height: $pi-navi-height;
    line-height: $pi-navi-height;
    margin: 0 10rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
    font-weight: 500;
    &.active {
      color: $pi-navi-active-color;
      border-bottom: 4rpx solid $pi-navi-active-color;
    }
  }
}

/*************************
布局 
**************************/
// 正方形
.pi-square {
  @extend .pi-relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;

  & > .pi-square-content {
    @extend .pi-absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.pi-width-100vw {
  width: 100vw;
}

.pi-width-100P {
  width: 100%;
}

.pi-height-100vh {
  height: 100vh;
}

.pi-height-100P {
  height: 100%;
}

.pi-show {
  display: inherit;
}

.pi-hide {
  display: none;
}

.pi-visible {
  visibility: visible;
}

.pi-hidden {
  visibility: hidden;
}

.pi-of-hidden {
  overflow: hidden;
}

.pi-of-x-hidden {
  overflow-x: hidden;
}

.pi-of-y-hidden {
  overflow-y: hidden;
}

.pi-of-auto {
  overflow: auto;
}

.pi-of-x-auto {
  overflow-x: auto;
}

.pi-of-y-auto {
  overflow-y: auto;
}

.pi-flex {
  display: flex;
}

.pi-flex-wrap {
  @extend .pi-flex;
  flex-wrap: wrap;
}

.pi-flex-row {
  @extend .pi-flex;
  flex-direction: row;
}

.pi-flex-column {
  @extend .pi-flex;
  flex-direction: column;
}

.pi-flex-sub {
  flex: 1;
}

.pi-flex-twice {
  flex: 2;
}

.pi-flex-treble {
  flex: 3;
}

.pi-align-start {
  @extend .pi-flex;
  align-items: flex-start;
}

.pi-align-end {
  @extend .pi-flex;
  align-items: flex-end;
}

.pi-align-center {
  @extend .pi-flex;
  align-items: center;
}

.pi-align-stretch {
  @extend .pi-flex;
  align-items: stretch;
}

.pi-self-start {
  @extend .pi-flex;
  align-self: flex-start;
}

.pi-self-center {
  @extend .pi-flex;
  align-self: flex-center;
}

.pi-self-end {
  @extend .pi-flex;
  align-self: flex-end;
}

.pi-self-stretch {
  @extend .pi-flex;
  align-self: stretch;
}

.pi-align-stretch {
  @extend .pi-flex;
  align-items: stretch;
}

.pi-justify-start {
  @extend .pi-flex;
  justify-content: flex-start;
}

.pi-justify-end {
  @extend .pi-flex;
  justify-content: flex-end;
}

.pi-justify-center {
  @extend .pi-flex;
  justify-content: center;
}

.pi-justify-between {
  @extend .pi-flex;
  justify-content: space-between;
}

.pi-justify-around {
  @extend .pi-flex;
  justify-content: space-around;
}

.pi-flex-row-center {
  @extend .pi-flex-row;
  @extend .pi-justify-center;
  @extend .pi-align-center;
}

.pi-flex-column-center {
  @extend .pi-flex-column;
  @extend .pi-justify-center;
  @extend .pi-align-center;
}

// grid布局
.pi-grid {
  display: flex;
  flex-wrap: wrap;
}

.pi-grid.pi-col-1 {
  & > view {
    width: 100%;
  }
  &.pi-grid-border {
    & > view {
      @include pi-border;
      &::after {
        border-bottom: 1px solid $pi-line-color;
      }
    }
  }
}

@mixin multi-border($n) {
  &.pi-grid-border {
    & > view {
      @include pi-border;
      &:not(:nth-last-child(-n + #{$n})) {
        &::after {
          border-bottom: 1px solid $pi-line-color;
        }
      }
      &:not(:nth-child(#{$n}n)) {
        &::after {
          border-right: 1px solid $pi-line-color;
        }
      }
    }
  }
}

.pi-grid.pi-col-2 {
  & > view {
    width: 50%;
  }
  @include multi-border(2);
}

.pi-grid.pi-col-3 {
  & > view {
    width: calc(100% / 3);
  }
  @include multi-border(3);
}

.pi-grid.pi-col-4 {
  & > view {
    width: 25%;
  }
  @include multi-border(4);
}

.pi-grid.pi-col-5 {
  & > view {
    width: 20%;
  }
  @include multi-border(5);
}

.pi-grid.pi-col-6 {
  & > view {
    width: calc(100% / 6);
  }
  @include multi-border(6);
}

@mixin space-calc($i, $n) {
  & > view {
    width: calc((100% - #{($n - 1) * $i}rpx) / #{$n});
    &:not(:nth-last-child(-n + #{$n})) {
      margin-bottom: #{$i}rpx;
    }
    &:not(:nth-child(#{$n}n)) {
      margin-right: #{$i}rpx;
    }
  }
}

// 处理列之间需要有空隙情况
@for $i from 1 through 50 {
  .pi-grid.pi-col-1.pi-col-space-#{$i} {
    & > view {
      margin-bottom: #{$i}rpx;
    }
  }
  .pi-grid.pi-col-2.pi-col-space-#{$i} {
    @include space-calc($i, 2);
  }
  .pi-grid.pi-col-3.pi-col-space-#{$i} {
    @include space-calc($i, 3);
  }
  .pi-grid.pi-col-4.pi-col-space-#{$i} {
    @include space-calc($i, 4);
  }
  .pi-grid.pi-col-5.pi-col-space-#{$i} {
    @include space-calc($i, 5);
  }
  .pi-grid.pi-col-6.pi-col-space-#{$i} {
    @include space-calc($i, 6);
  }
}

/* 浮动 */
.pi-cf::after,
.pi-cf::before {
  content: ' ';
  display: table;
}

.pi-cf::after {
  clear: both;
}

.pi-fl {
  float: left;
}

.pi-fr {
  float: right;
}

/* 表单 form
---------------------- */
.pi-form {
  display: block;
  width: 100%;

  .pi-form-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 32rpx;
    background: #ffffff;
    transition: all 0.6s ease-in-out 0s;

    &.wrap {
      // 换行模式显示
      flex-direction: column;
      align-items: flex-start;
      .pi-form-label,
      .pi-form-other,
      textarea {
        width: 100%;
      }
      .input,
      .pi-form-other {
        margin-left: 0;
        padding-bottom: 32rpx;
      }
    }
    &.display-model {
      // 显示模式
      .pi-form-label {
        color: #999999;
      }
      .input {
        text-align: left;
        color: #000000;
      }
    }
    &.more {
      padding-right: 72rpx;
      &::before {
        position: absolute;
        top: 50%;
        right: 32rpx;
        transform: translateY(-50%);
        content: '\E6A3';
        font-family: 'piui';
        font-size: 16px;
        color: #d2d2d2;
      }
    }
    &.border {
      @include pi-border;
      &::after {
        border-bottom: 1px solid $pi-line-color;
      }
    }
    .pi-form-label {
      height: $pi-form-item-height;
      line-height: $pi-form-item-height;
      flex-shrink: 0;
      font-size: $pi-form-font-size;
      font-weight: $pi-form-font-weight;
      color: $pi-form-label-color;
      &.pi-form-require {
        // 必选红点
        position: relative;
        padding-left: 24rpx;
        &::after {
          content: '*';
          position: absolute;
          left: 0;
          top: 0;
          height: $pi-form-item-height;
          line-height: $pi-form-item-height;
          color: $pi-form-require-color;
        }
      }
    }
    .input {
      background: none;
      flex: 1;
      border: 0;
      text-align: right;
      margin-left: 40rpx;
      color: $pi-form-input-color;
      font-size: $pi-form-font-size;
    }
    .pi-form-other {
      overflow: hidden;
      margin-left: 40rpx;
      font-size: $pi-form-font-size;
    }

    .pi-form-sub {
      @extend .pi-form-other;
      flex: 1;
    }

    picker {
      @extend .pi-form-other;
      height: $pi-form-item-height;
      line-height: $pi-form-item-height;
      text-align: right;
    }
    picker text {
      color: #333;
      font-size: 28upx;
    }
    textarea {
      background: none;
      border: 0;
      font-size: $pi-form-font-size;
      color: #333333;
      text-align: left;
    }
    // 多选框颜色和标签
    checkbox-group label {
      &:not(:last-child) {
        padding-right: 24rpx;
      }
      .uni-checkbox-input {
        border: 0;
        background-color: #cccccc;
        &::before {
          color: #ffffff;
        }
        &.uni-checkbox-input-checked {
          background-color: $pi-fourth-color;
          border-radius: 4rpx;
        }
      }
    }
    // 单选框颜色修改
    switch {
      .uni-switch-input.uni-switch-input-checked {
        border-color: $pi-fourth-color !important;
        background-color: $pi-fourth-color !important;
      }
    }
    label {
      display: flex;
      align-items: center;
      color: #333333;
    }
  }
}

.pi-upload {
  $radius: $pi-upload-radius;
  position: relative;
  display: inline-block;
  width: $radius;
  height: $radius;
  border-radius: 8rpx;
  background-color: #f6f6f6;
  overflow: hidden;
  &::after {
    content: '\e6e4';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'piui';
    font-size: 60rpx;
    color: #a4a4a4;
    text-align: center;
  }
}

/* 边框 border
---------------------- */
[class*='pi-solid'],
[class*='pi-dashed'] {
  @include pi-border;
}

// 生成1-10的边框（实线/虚线）
@for $i from 1 through 10 {
  // 实线
  .pi-solid-#{$i}::after {
    border: 1px * $i solid $pi-line-color;
  }
  .pi-solid-top-#{$i}::after {
    border-top: 1px * $i solid $pi-line-color;
  }
  .pi-solid-right-#{$i}::after {
    border-right: 1px * $i solid $pi-line-color;
  }
  .pi-solid-bottom-#{$i}::after {
    border-bottom: 1px * $i solid $pi-line-color;
  }
  .pi-solid-left-#{$i}::after {
    border-left: 1px * $i solid $pi-line-color;
  }
  // 虚线
  .pi-dashed-#{$i}::after {
    border: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-top-#{$i}::after {
    border-top: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-right-#{$i}::after {
    border-right: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-bottom-#{$i}::after {
    border-bottom: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-left-#{$i}::after {
    border-left: 1px * $i dashed $pi-line-color;
  }
}

[class*='pi-solid-'],
[class*='pi-dashed-'] {
  &.pi-round::after {
    border-radius: 500000rpx;
  }
}

/* ==================
          头像
 ==================== */
.pi-avatar {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  white-space: nowrap;
  position: relative;
  width: 64rpx;
  height: 64rpx;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 1.5em;
  border-radius: 50%;
}

.pi-avatar.sm {
  width: 48rpx;
  height: 48rpx;
  font-size: 1em;
}

.pi-avatar.lg {
  width: 96rpx;
  height: 96rpx;
  font-size: 2em;
}

.pi-avatar.xl {
  width: 128rpx;
  height: 128rpx;
  font-size: 2.5em;
}

.pi-avatar .avatar-text {
  font-size: 0.4em;
}

.pi-avatar-group {
  direction: rtl;
  unicode-bidi: bidi-override;
  padding: 0 10rpx 0 40rpx;
  display: inline-block;
}

.pi-avatar-group .pi-avatar {
  margin-left: -30rpx;
  border: 4rpx solid #f1f1f1;
  vertical-align: middle;
}

.pi-avatar-group .pi-avatar.sm {
  margin-left: -20rpx;
  border: 1rpx solid #f1f1f1;
}

/*************************
 列表 
**************************/
.pi-list {
  background: #ffffff;
  .pi-list-item {
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.6s ease-in-out 0s;
    /* 列表左滑操作 */
    &.pi-move {
      transform: translateX(-260rpx);
    }
    & > .pi-action {
      position: absolute;
      right: 0;
      display: flex;
      width: 260rpx;
      height: 100%;
      transform: translateX(100%);
      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
      }
    }
    &.more {
      padding-right: 72rpx;
      &::before {
        position: absolute;
        top: 50%;
        right: 32rpx;
        transform: translateY(-50%);
        content: '\E6A3';
        font-family: 'piui';
        font-size: 16px;
        color: #d2d2d2;
      }
    }
    &.border {
      @include pi-border;
      &::after {
        border-bottom: 1px solid $pi-line-color;
      }
    }
    /* 列表头像 */
    .pi-list-avatar {
      overflow: hidden;
    }
  }
}

/*************************
初始化全局样式
**************************/
body,
page {
  background-color: $pi-background-color;
  font-size: $pi-font-size;
  color: $pi-font-color;
  font-family: $pi-font-family;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
  box-sizing: border-box;
  &:focus {
    outline: none;
  }
}

// 按钮样式修改
button {
  margin: 0;
  height: $pi-button-height;
  line-height: $pi-button-height;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.6s ease-in-out;

  &::after {
    background: transparent;
    border: none;
  }
  // 默认样式
  &[type='default'] {
    color: $pi-primary-color;
    background-color: #ffffff;
    &.border::after {
      border: 4rpx solid $pi-primary-color;
    }
    &.mini {
      height: $pi-button-mini-height;
      line-height: $pi-button-mini-height;
    }
  }
  &[disabled][type='default'] {
    color: $pi-primary-color;
    background-color: #ffffff;
    opacity: 0.2;
    &.border::after {
      border: 4rpx solid $pi-primary-color;
    }
    &.mini {
      height: $pi-button-mini-height;
      line-height: $pi-button-mini-height;
    }
  }
  &.button-hover[type='default'] {
    color: $pi-primary-color;
    background-color: #ffffff;
    opacity: 0.8;
  }
  &[loading][type='default'] {
    color: hsla(0, 0%, 100%, 0.6);
    background-color: #ffffff;
  }
  // 主要样式
  &[type='primary'] {
    color: #ffffff;
    background-color: $pi-primary-color;
  }
  &[disabled][type='primary'] {
    background-color: $pi-primary-color;
    opacity: 0.2;
  }
  &.button-hover[type='primary'] {
    background-color: $pi-primary-color;
    opacity: 0.8;
  }
  &[loading][type='primary'] {
    color: hsla(0, 0%, 100%, 0.6);
    background-color: $pi-primary-color;
  }
}

.pi-radius-circle {
  border-radius: 50%;
}

// 用于没有scroll-view时候的容器
.pi-container {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

// 用于scroll-view时候的容器
.pi-scroll-container {
  height: calc(100vh - var(--window-bottom));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .pi-scroll {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: 100%;
  }
}

// 页面内容区域
.pi-content {
  padding: 24rpx 32rpx;
  background: #ffffff;
}

.pi-round {
  border-radius: 500000rpx;
  overflow: hidden;
}

.pi-safearea {
  background: $pi-safearea-bg;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 4;
}

.uni-input-placeholder {
  color: $pi-placeholder-color;
}

.pi-bottom-btns {
  @extend .pi-width-100P;
  @extend .pi-align-center;
  @extend .pi-safearea;
  background-color: #ffffff;
  &.box-shadow {
    box-shadow: 0 -4rpx 10rpx 0 rgba(0, 0, 0, 0.06);
  }
}

.pi-bottom-area {
  @extend .pi-safearea;
  box-sizing: content-box;
  height: $pi-button-height + $pi-form-item-height; // 按钮高度 + 表单高度
}

.placeholder {
  color: $uni-text-color-grey;
}

@for $i from 1 through 10 {
  .pi-mask-#{$i} {
    @extend .pi-fixed-top;
    @extend .pi-width-100P;
    @extend .pi-height-100P;
    background: rgba(0, 0, 0, $i/10);
    z-index: 11;
  }
}
